<template>
    <Layout class="p-5 bg-white">
        <Form class="p-5" :model="vipMain" :label-width="130">
			<Row>
				<Col span="8">
					<FormItem class="w-100" label="姓名">
						<label>{{vipMain.clientName}}</label>
					</FormItem>
					<FormItem class="w-100" label="Vip类别">
						<label>
							<span v-if="vipMain.vipType == 'C'">会员卡</span>
							<span v-else>会员券</span>
						</label>
					</FormItem>
					<FormItem class="w-50" label="Vip状态">
						<Select v-model="vipMain.statu">
						    <Option v-for="item in statuList" :value="item.value" :key="item.value">{{ item.label }}</Option>
						</Select>
						<!-- <Select v-model="vipMain.statu" >
							<Option value=1 >已开启</Option>
							<Option value=0 >未开启</Option>
							<Option value=2 >已过期</Option>
						</Select> -->
					</FormItem>
					
					</Col>
					<FormItem class="w-100" label="Vip类型">
						<label>
							{{vipMain.cname}}{{vipMain.vname}}
							<!-- <span v-if="vipMain.cname == ''">{{vipMain.cname}}</span>
							<span v-else>{{vipMain.cname}}</span> -->
						</label>	
					</FormItem>
					<FormItem class="w-150" label="支付平台支付编号">
						<!-- <label>{{vipMain.originalCode}}</label> -->
							<span v-if="vipMain.originalCode == null">会员券无支付编号</span>
							<span v-else>{{vipMain.originalCode}}</span>
					</FormItem>
					<FormItem class="w-100" label="注册时间">
						<label>{{vipMain.ct}}</label>
					</FormItem>
					<FormItem class="w-50" label="开始时间">
						<!-- <Input v-model="vipMain.st"/> -->
						<Date-picker  type="datetime" v-model="vipMain.st" format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" ></Date-picker>
					</FormItem>
					<FormItem class="w-50" label="结束时间">
						<!-- <Input v-model="vipMain.et"/> -->
						<Date-picker  type="datetime" v-model="vipMain.et" format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" ></Date-picker>
					</FormItem>
					<FormItem class="w-100" label="交易金额">
						<label>
							<span v-if="vipMain.amount == null">该类型无金额</span>
							<span v-else>{{vipMain.amount}}</span>
						</label>
					</FormItem>
					<FormItem class="w-100" label="性别">
						<label>
						<span v-if="vipMain.sex == '1'">男</span>
						<span v-else>女</span>
						</label>
					</FormItem>
					<FormItem class="w-100" label="会员年龄">
						<label>{{vipMain.age}}</label>
					</FormItem>
					<FormItem class="w-100" label="门店">
						<label>{{vipMain.name}}</label>
					</FormItem>
					<FormItem class="w-100" label="联系电话">
						<label>{{vipMain.phone}}</label>
					</FormItem>	
				</Row>
            
            
			<FormItem>
			    <Button @click="submit" type="primary">提交</Button>
			    <Button @click="cancel" style="margin-left: 8px">取消</Button>
			</FormItem>
        </Form>
    </Layout>

</template>
<script>
    export default {
        data() {
            return {
                vipMain: {
					vipId:"",
                    clientName: "",
					vname:"",
					cname:"",
                    vipType: "",
					statu: 0,
					ct: "",
					st: "",
					et: "",
					amount: "",
					sex: "",
					age: "",
					name: "",
					sex: "",
					phone:"",
					originalCode:"",
                },
				statuList:[
                    {
                        value: 0,
                        label: '未开启'
                    },
                    {
                        value: 1,
                        label: '已开启'
                    },
                    {
                        value: 2,
                        label: '已过期'
                    },
                ],
				// vipId:0,
                roles: [],
                allRoles: [],
                // updateFlg: false,
                // oldUser: {},
                // oldRoles: [],

            }
        },
        methods: {
			roleChange: function(vipId) {
				
			},
            cancel: function () {
                this.$tabs.close();
            },
            submit: function () {
				if(this.vipMain.st <= this.vipMain.et){
					this.http.put({
					    url: "/client/vip/info",
					    param: {
							vip:this.$data.vipMain
						}
					}).then(() => {
						this.$tabs.close();
					    this.message.info("修改成功");
					});
				}else{
					this.message.error("开始时间不得大于结束时间")
				}   
            },
            init: function () {
                this.search();
            },

            search: function () {
                let self = this;
                this.http.get({
                    url: "/client/vip/info",
					param:{
						vipId:this.$data.vipMain.vipId
					}
                }).then(data => {
					if(null != data.ct){
						data.ct = data.ct.replace('T',' ')
					}
					if(null != data.st){
						data.st = data.st.replace('T',' ')
					}
					if(null != data.et){
						data.et = data.et.replace('T',' ')
					}if(null != data.amount){
						data.amount = data.amount/100
					}
                    self.$data.vipMain = data;
                });
            }

        },
		
        created: function () {
			this.$data.vipMain.vipId = this.$route.params.vipId;
            this.init();
        }
    }
</script>

<style>
</style>
